<template>
  <div class="main">
    <swiper class="swiper" ref="subjectsSwiper" :options="swiperOption">
      <swiper-slide class="subject" v-for="(item,i) in subjects" :key="i" :class="{'active':i==clickedIndex}">
        {{ item }}
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'slide-navigate',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      clickedIndex: 0,
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 2,
        slidesPerGroup: 4,
        loop: false,
        loopFillGroupWithBlank: false,
        // 使用es6的箭头函数，使this指向vue对象
        on: {
          click: () => {
            // 通过$refs获取对应的swiper对象
            this.clickedIndex = this.$refs.subjectsSwiper.$swiper.clickedIndex;
            console.log(this.clickedIndex)
          }
        },
      }, subjects: [
        "社区新闻",
        "通知公告",
        "社区生活",
        "反馈建议",
        "房屋租售",
        "咨询互助",
        "二手市场",
        "招聘求职",
        "失物招领",
        "全部话题"
      ],
    }
  }
}


</script>

<style lang="css" scoped>


.main {
  width: 100%;
  height: 8vh;
}

.active {
  color: blue;
  font-weight: 600;
  font-size: 30px;
}

.subject {
  text-align: center;
  font-size: 15px;
  line-height: 8vh;
}
</style>